<template>
  <div style="height: 100%">
    <div>
      <img src="@/assets/logo.png" alt="logo"
        style="width: 230px;height: 49px;margin-top: 15px;margin-left: 20px;cursor: pointer; " @click="to('/')" />
    </div>
    <!-- 主盒子 -->
    <div class="mainbox">
      <!-- 左盒子 -->
      <div class="left-contrainer">
        <img src="@/assets/login_background.png" class="login_background" style="width: 330px; height: 500px" />
      </div>
      <!-- 分割线 -->
      <div class="divider"></div>
      <!-- 右盒子 -->
      <div class="right-contrainer">
        <div class="title">个人登录</div>
        <div class="login-switch">
          <div :style='{ color: (!loginType ? "#4177f7" : "#000") }' @click="changeLoginType">账号密码登录</div>
          <el-divider direction="vertical" />
          <div :style='{ color: (loginType ? "#4177f7" : "#000") }' @click="changeLoginType">邮箱登录</div>
        </div>
        <div class="input-box">
          <el-input v-model="username" :placeholder="placeholder" size="large" />
        </div>

        <div class="input-box">
          <el-input v-model="password" placeholder="请输入密码" size="large" show-password type="password" />
        </div>

        <div style="display: flex;margin-top: 30px;justify-content: space-between;align-items: center;">
          <div style="color: #4177f7; cursor: pointer" @click="to('/register')">
            注册
          </div>
          <div style="color: #4177f7; cursor: pointer" @click="to('/forgetPassword')">
            忘记密码
          </div>
        </div>

        <div class="login-btn" @click="submitLogin">登录</div>
      </div>
    </div>
    <div class="introduce">更快，更全面的深度学习可视化平台</div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { login, loginEmail } from '@/api.js'
const router = useRouter();
//false为用户名，true为邮箱登录
const placeholder = ref('请输入用户名')
const loginType = ref(false);
const to = (url) => {
  router.push(url);
};
const username = ref("");
const password = ref("");
const changeLoginType = () => {
  loginType.value = !loginType.value;
  if (!loginType.value) {
    placeholder.value = "请输入用户名"
  }
  else {
    placeholder.value = "请输入邮箱"
  }
}
const submitLogin = async () => {
  if (username.value.length == 0 && !loginType.value) {
    ElMessage({
      message: "请输入用户名",
      type: "error",
    });
    return;
  }
  if (username.value.length == 0 && loginType.value) {
    ElMessage({
      message: "请输入邮箱",
      type: "error",
    });
    return;
  }
  if (!password.value) {
    ElMessage({
      message: "请输入密码",
      type: "error",
    });
    return;
  }
  if (!loginType.value) {
    const res = await login(username.value, password.value);
    console.log(res);
    if (res.success) {
      localStorage.setItem("userInfo", JSON.stringify(res.userInfo));
      localStorage.setItem("accessToken",res.token)
      ElMessage({
        message: "登录成功",
        type: "success",
      });
      to('/');
    }
    else {
      ElMessage({
        message: "登录失败",
        type: "error",
      });
      return;
    }
  }
  else {
    const res = await loginEmail(username.value, password.value);
    if (res.success) {
      localStorage.setItem("userInfo", JSON.stringify(res.userInfo));
      ElMessage({
        message: "登录成功",
        type: "success",
      });
      to('/');
    }
    else {
      ElMessage({
        message: "登录失败",
        type: "error",
      });
      return;
    }
  }

}
</script>


<style scoped>
.mainbox {
  display: flex;
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
  justify-content: center;
  justify-content: space-around;
  align-items: center;
}

.left-contrainer {
  width: 370px;
  height: 440px;
}

.login_background {
  width: 342px;
  height: 380px;
}

.introduce {
  margin-top: 60px;
  color: #000000;
  font-weight: 400;
  font-size: 22px;
  font-style: normal;
  text-decoration: none;
  text-align: center;
}

.divider {
  display: inline-block;
  width: 0px;
  height: 30em;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
  border-left: 1px var(--el-border-color) var(--el-border-style);
}

.right-contrainer {
  width: 370px;
  position: relative;
}

.title {
  font-weight: 600;
  font-size: 25px;
}

.login-switch {
  display: flex;
  margin-top: 40px;
  align-items: center;
}

.login-switch div {
  cursor: pointer;
}

.input-box {
  margin-top: 20px;
}

.login-btn {
  width: 130px;
  background-color: #2979ff;
  border-radius: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  margin: 0 auto;
  margin-top: 60px;
}
</style>